<template>
	<view>
		<view class="swiper">
			<view class="jiazai">
				<cCircle
				:size="35"
				:percent="100"
				:animation="true" 
				:animationSpeed="100" 
				@animationPercent="getPercent"
				circleWidth="2"
				animationSpeed=35
				@onComplete=onComplete
				>
					<span slot="content" class="text" style="color: #FFFFFF;">{{percent}}%</span>
				</cCircle>
			</view>
			<image class="swiper-image" src="https://z3.ax1x.com/2021/04/29/gFX0KA.png" mode=""></image>
		</view>
	</view>
</template>
<script>
	import cCircle from "../../components/Your_Exios-Circle/Your_Exios-Circle.vue"
	export default {
		components:{
		   cCircle
		},
		data() {
			return {
				percent:100
			}
		},
		methods: {
			getPercent(animationPercent){
				this.percent = animationPercent;
			},
			onComplete(){
				uni.switchTab({
					url:'../home/home'
				})
			}
		}
	}
</script>
<style>
	.swiper {
		width: 100%;
		height: 100vh;
		position: relative;
	}
	.swiper-image {
		width: 100%;
		height: 100%;
	}
	.jiazai{
		top: 30rpx;
		right: 40rpx;
		position: absolute;
	}
	.text{
		font-size: 18rpx;
	}
</style>
